<template>
  <div>
    <el-card>
      <template #header>
        <el-button type="primary">添加新分类</el-button>
      </template>

      <ZkTable
        :data="categories"
        :columns="columnsConfig"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
      >
        <template #delete="{ row }">
          <div>
            {{ row.cat_deleted }}
          </div>
        </template>
        <template #level="{ row }">
          <div>
            {{ row.cat_level }}
          </div>
        </template>
        <template #btns>
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
      </ZkTable>

      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 15, 20, 25, 30]"
        :page-size="params.pagesize"
        :current-page="params.pagenum"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import ZkTable from "vue-table-with-tree-grid";
export default {
  components: {
    ZkTable,
  },
  data() {
    return {
      columnsConfig: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          type: "template",
          template: "delete",
        },
        {
          label: "级别",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "btns",
        },
      ],
      categories: [],
      total: 0,
      params: {
        type: "",
        pagenum: 1,
        pagesize: 5,
      },
    };
  },
  methods: {
    async loadCategoriesList() {
      let result = await this.$api.getCategoriesList(this.params);
      // console.log(result);
      this.total = result.total;
      this.categories = result.result;
    },
  },
  created() {
    this.loadCategoriesList();
  },
};
</script>

<style lang="less" scoped>
.el-card {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  :deep(.el-card__body) {
    flex-grow: 1;
    padding-bottom: 70px;
    overflow: hidden;
  }
}
// :deep(.el-table__body-wrapper){
//   height: 100%!important;
// }
.el-table {
  height: 100%;
}
.search-input {
  width: 400px;
  margin-right: 20px;
}
.el-pagination {
  padding: 20px;
  text-align: center;
}
</style>